早安！今天目標是把活動清單頁面完成！

昨天做到父組件傳遞資料到子組件了，那今天就是要利用這些資料來完善頁面

先列一下要做什麼：

1. 圖片
2. 活動標題
3. 活動時間
4. 活動地點
5. 免費or付費標籤
6. 活動類別標籤
7. 活動超連結

好的我們一個一個來~

上面這些資訊在api中都有了，所以只要塞到對應的位置就可以了

接下來會把程式碼拆開逐一介紹，如果覺得有點混亂，頁面最下方有放完成程式碼。

加上活動圖片

<v-img
    class="white--text align-end"
    height="200px"
    :src="topic.imageUrl" <!-- 把圖片連結設為 topic.imageUrl -->
/>

加上活動標題

<v-card-title>{{ topic.title }}</v-card-title>

加上活動日期 - v-if

這邊利用 v-if 去判斷起始日期跟結束日期是不是同一天，

如果是的話就只顯示 開始日期，如果不是的話就顯示 開始日期~結束日期

<div>
    <v-icon>event</v-icon>
    {{ topic.startDate }}
    <div
    class="content"
    v-if="topic.startDate !== topic.endDate">
    ~{{ topic.endDate }}
    </div>
</div>

加上活動地點 - 條件運算子

活動地點有2個欄位 location 跟 locationName，這邊判斷如果location內為空時，改顯示locationName

這邊採用 條件(三元)運算子的方式來寫，格式很像 if else的寫法

condition ? true執行的部分 : false執行的部分

<div>
    <v-icon>location_on</v-icon>
    {{ topic.showInfo[0].location !== ''
        ? topic.showInfo[0].location
        : topic.showInfo[0].locationName }}
</div>

加上 免費/付費 標籤 - v-else

跟上面的地點字段不同，標籤需要更改顏色，

用條件運算子的話會沒那麼好讀，所以改用 v-if v-else的方式來寫

<v-chip
    v-if="topic.showInfo[0].onSales ==='N'"
    class="ma-2"
    color="green"
    text-color="white"
    small
>
    免費
</v-chip>
<v-chip
    v-else
    class="ma-2"
    color="orange"
    text-color="white"
    small
>
	付費
</v-chip>
        

加上活動類別標籤 - 類別字段對照

這個部分比較複雜一點，因為data傳來的類別是1、2、3...，但是要顯示的是中文類別名稱

所以需要用個對照表，讓他可以自己對照類型，

首先加一個 methods參數，裡面可以自己寫多個method

這邊新增一個 getTopicCategory ( category) 方法

Topic.vue

<script>
export default {
  name: 'Topic',
  props: ['topic'],
  methods: {
    getTopicCategory(category) {
      const categoryEnums = {
        1: '音樂',
        2: '戲劇',
        3: '舞蹈',
        4: '親子',
        5: '獨立音樂',
        6: '展覽',
        7: '講座',
        8: '電影',
        11: '綜藝',
        13: '競賽',
        14: '徵選',
        15: '其他',
        17: '演唱會',
        19: '研習課程',
      };
      return categoryEnums[category];
    },
  },
};
</script>

然後在template呼叫這個方法，這邊要記得帶入類別參數

<v-chip
    class="ma-2"
    color="grey"
    text-color="white"
    small
    >
    {{ getTopicCategory(topic.category) }}
</v-chip>

加上活動超連結 - 邏輯運算子 &&

連結的部分原始資料一樣有2個欄位 webSales 跟 sourceWebPromote，

這邊可以用一個更簡單的方法 邏輯運算子

如果webSales為空 就顯示sourceWebPromote

<v-card
    class="mx-auto text-left"
    max-width="400"
    :href="topic.webSales && topic.sourceWebPromote"
    target="_blank"
  >

成果展示

完整程式碼

請參考 GitHub

父組件 TopicPage.vue

子組件 Topic.vue

完成~~

這篇改了一下敘述的方式

變成全部寫完再來解釋code，就沒有完成每個步驟都截圖了

之後應該也會採用這種方式~ ( 因為這樣寫文比較快

ok 記得commit 明天見